<template>
	<view class="">
		<view class="container">
			<view class="main">
				<view class="title u-flex u-col-center u-row-between">
					<view class="tl">联系信息</view>
					<view class="tr u-flex u-col-center u-row-right" @click="$pageTo('/pages/user/addressList?types=release')">
						<text>切换/选择</text>
						<image src="@/static/qh.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="list" v-if="personInfo.gameZoneName">
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">大区名称</view>
						<view class="r">
							{{ personInfo.gameZoneName }}
						</view>
					</view>
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">角色ID</view>
						<view class="r">
							{{ personInfo.account }}
						</view>
					</view>
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">微信号</view>
						<view class="r">
							{{ personInfo.wechat }}
						</view>
					</view>
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">手机号</view>
						<view class="r">
							{{ personInfo.phone }}
						</view>
					</view>
				</view>
			</view>
			<view class="main">
				<view class="title u-flex u-col-center u-row-between">
					<view class="tl">道具信息</view>
				</view>
				<view class="list">
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">类型</view>
						<view class="r">
							{{ dataInfo.type == 1 ? '我要收购' : '我要出售' }}
						</view>
					</view>
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">商品名称</view>
						<view class="r">
							{{ dataInfo.name }}
						</view>
					</view>
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">
							价格模式
						</view>
						<view class="r">
							{{dataInfo.priceMode==1?'买家出价':'卖家定价'}}
						</view>
					</view>
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">
							价格
							<text>(MHB)</text>
						</view>
						<view class="r" v-if="dataInfo.price">
							<view class="pa" >
								<text
									class="p"
									:class="{
										p1: getPriceLength(dataInfo.price) < 6,
										p2: getPriceLength(dataInfo.price) == 6,
										p3: getPriceLength(dataInfo.price) == 7,
										p4: getPriceLength(dataInfo.price) == 8,
										p5: getPriceLength(dataInfo.price) >= 9
									}"
								>
									{{ $numToLocaleString(dataInfo.price) }}
								</text>
							</view>
							<view class="pb">
								{{ dataInfo.price | numberToChinese(dataInfo.priceUnit) }}
							</view>
						</view>
						<view class="r" v-else>
							-
						</view>
					</view>
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">图片</view>
						<view class="r" @click="$previewImage([dataInfo.image], 0)">
							<image :src="dataInfo.image" mode="aspectFill"></image>
						</view>
					</view>
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">上架天数</view>
						<view class="r">
							{{ dataInfo.upday }}
						</view>
					</view>
				</view>
			</view>
			<view class="f-price u-flex u-col-center u-row-between" v-if="false">
				<view class="l">所需商人币</view>
				<view class="r">
					{{ dataInfo.upday * coin }}
				</view>
			</view>
			<view class="tips">
				<view class="" v-html="content"></view>
			</view>
		</view>
		<view class="" style="height: 200rpx"></view>
		<view class="footer-con" v-if="objdata.from == 'edit'">
			<view class="rem u-flex u-col-center" @click="rem = !rem">
				<image src="@/static/c6.png" mode="aspectFill" v-if="rem"></image>
				<image src="@/static/c1.png" mode="aspectFill" v-else></image>
				<text class="t1">我已阅读并同意</text>
				<text class="t2" @click.stop="$pageTo(`/pages/user/article?type=quotationrule`)">发布规则</text>
			</view>
			<view class="f-btn" @click="confirm">确认</view>
		</view>
		<view class="footer-con" v-else>
			<view class="rem u-flex u-col-center" @click="rem = !rem">
				<image src="@/static/c6.png" mode="aspectFill" v-if="rem"></image>
				<image src="@/static/c1.png" mode="aspectFill" v-else></image>
				<text class="t1">我已阅读并同意</text>
				<text class="t2" @click.stop="$pageTo(`/pages/user/article?type=quotationrule`)">发布规则</text>
			</view>
			<!-- <view class="f-btn" @click="pay">
				立即支付 {{dataInfo.upday * coin}} 商人币
			</view> -->
			<view class="f-btn" @click="confirm">立即发布</view>
		</view>
	</view>
</template>

<script>
import { webconfig, accountList, getUserinfo, quotationAdd, quotationEdit, quotationEditAll, quotationUp } from '@/common/http.api.js';
export default {
	data() {
		return {
			rem: true,
			content: ``,
			dataInfo: {},
			personInfo: {},
			objdata: {},
			coin: 0
		};
	},
	onLoad(option) {
		this.objdata = JSON.parse(decodeURIComponent(option.obj));
		console.log(this.objdata);
	},
	onShow() {
		let data = uni.getStorageSync('releaseData');
		this.dataInfo = this.objdata;
		if (uni.getStorageSync('addressData')) {
			let addressData = uni.getStorageSync('addressData');
			this.personInfo = addressData;
		} else {
			this.getlist();
		}
		this.getwebconfig();
	},
	computed: {
		getPriceLength() {
			return (data) => {
				if (!data) return 1;

				function getDigitCount(num) {
					if (num === 0) return 1;

					num = Math.abs(parseInt(num)); // 忽略小数部分，只处理整数
					return Math.floor(Math.log10(num)) + 1;
				}
				let l = getDigitCount(data);
				return l;
			};
		}
	},
	methods: {
		getwebconfig() {
			webconfig({}).then((res) => {
				if (res.code == 200) {
					this.content = res.data.quotationrule;
					this.coin = res.data.coin;
				}
			});
		},
		getlist() {
			accountList({
				page: 1
			}).then((res) => {
				if (res.code == 200) {
					let list = res.data.list;
					let index = list.findIndex((item) => item.isDefault == 1);
					if (index > -1) {
						let addressData = list[index];
						this.personInfo = addressData;
					}
				}
			});
		},
		// 点击确认
		confirm() {
			if (!this.personInfo.gameZoneName) {
				this.$modal.msg('请选择游戏区服');
				return;
			}
			if (!this.rem) {
				this.$modal.msg('请阅读并同意规则');
				return;
			}
			this.$throttling(() => {
				quotationEditAll({
					type: this.dataInfo.type,
					id: this.dataInfo.id,
					name: this.dataInfo.name,
					priceMode: this.dataInfo.priceMode,
					price: this.dataInfo.price,
					image: this.dataInfo.image,
					upday: this.dataInfo.upday,
					account: this.personInfo.account,
					wechat: this.personInfo.wechat,
					phone: this.personInfo.phone,
					game_zone_name: this.personInfo.gameZoneName,
					priceUnit: 0,
					paytype: 1
				}).then((res) => {
					if (res.code == 200) {
						uni.removeStorageSync('addressData');
						uni.redirectTo({
							url: '/pages/user/success'
						});
					}
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
$color: #ff6f07;

.footer-con {
	position: fixed;
	width: 100%;
	bottom: 0;
	background-color: #fff;
	padding: 30rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 9;
	box-sizing: border-box;
	min-height: 200rpx;

	.f-btn {
		line-height: 100rpx;
		font-size: 32rpx;
		color: #fff;
		height: 100rpx;
		background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
		border-radius: 20rpx;
		text-align: center;
		width: 100%;
		margin-top: 20rpx;
	}

	.rem {
		image {
			width: 28rpx;
			height: 28rpx;
			display: inline-block;
		}

		text {
			font-size: 20rpx;
			color: #d1d1d6;
			margin-left: 10rpx;
		}

		.t2 {
			color: $color;
		}
	}
}

.container {
	padding: 20rpx 30rpx 0rpx;

	.tips {
		padding-top: 20rpx;
		font-size: 26rpx;
		color: #aeaeae;
		line-height: 40rpx;
	}

	.m-pop2 {
		width: 620rpx;
		height: 400rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		flex-direction: column;
		box-sizing: border-box;
		padding: 60rpx 40rpx 20rpx;
		background: #fff;
		border-radius: 20rpx;

		.t {
			line-height: 44rpx;
			height: 44rpx;
			font-size: 40rpx;
			color: #000000;
			text-align: center;
			font-weight: 600;
		}

		.p {
			margin-top: 60rpx;
			line-height: 44rpx;
			height: 44rpx;
			font-size: 32rpx;
			color: #000000;
			text-align: center;

			text {
				color: $color;
			}
		}

		.btns {
			width: 100%;
			margin-top: 50rpx;

			.btn {
				text-align: center;
				font-size: 32rpx;
				width: calc(50% - 10rpx);
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 20rpx;
			}

			.btn1 {
				background: #f9f9f9;
				color: #d1cdcd;
			}

			.btn2 {
				color: #fff;
				background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
			}
		}
	}

	.f-price {
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;

		.l {
			color: #11192d;
			font-size: 32rpx;
		}

		.r {
			color: #11192d;
			font-size: 28rpx;
		}
	}

	.main {
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;

		.list {
			margin-top: 20rpx;

			.item {
				padding: 10rpx 0;

				.l {
					height: 40rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					color: #979797;
					text {
						font-size: 20rpx;
						margin-left: 10rpx;
					}
				}

				.r {
					flex: 1;
					width: 1rpx;
					text-align: right;
					line-height: 40rpx;
					color: #11192d;
					font-size: 28rpx;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 12rpx;
						overflow: hidden;
					}

					.pa {
						text-align: right;

						.p {
							font-family: 'DIN';
							font-weight: bold;
							font-size: 36rpx;
							text-align: right;
						}

						.p5 {
							color: #ff70a4;
						}

						.p4 {
							color: #840ffb;
						}

						.p3 {
							color: #fe1515;
						}

						.p2 {
							color: #1ec742;
						}

						.p1 {
							color: #11192d;
						}
					}

					.pb {
						line-height: 30rpx;
						height: 30rpx;
						font-size: 20rpx;
						color: #979797;
					}
				}
			}
		}

		.title {
			height: 40rpx;
			line-height: 40rpx;

			.tl {
				font-size: 32rpx;
				color: #11192d;
			}

			.tr {
				text {
					font-size: 28rpx;
					color: $color;
				}

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}
}
</style>
